<template>
    <!-- 单个选择、直接上传 -->
    <a-upload
        ref="uploadRef"
        list-type="picture-card"
        :show-file-list="false"
        @change="handleUpload"
    >
        <template #upload-button v-if="uploadUrl">
            <slot></slot>
        </template>
    </a-upload>
</template>
<script lang="ts" setup>
import * as Api from '@/api/common';
import { debounce } from 'lodash';
const uploadRef = ref(null);
const uploadUrl = ref(null);
const emit = defineEmits(['handleUpload', 'imgUrl']);
// 上传文件
const handleUpload = debounce(async (e) => {
    try{
        const file = e.length === 1 ? e[0].file : e[e.length - 1].file;
        console.log('图片===', file);
        const fromData = new FormData();
        fromData.append('file', file);
        const res = await Api.ApiUploadMini(fromData);
        if(res?.data?.filename){
            uploadUrl.value = `${import.meta.env.VITE_BASE_URL}/admin-api/infra/file/preview/${res?.data?.filename}`;
            console.log(uploadUrl.value ,'uploadUrl.value ');
            
            emit('imgUrl', uploadUrl.value);
        }
    }catch(err){console.log(err);}
}, 200)
defineExpose({
    uploadUrl
})
</script>
<style lang="scss" scoped>
.arco-upload{
    position: relative;
}
</style>